<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="900px" @closed="()=>{
      this.drawerVisible = false;
    }">


      <div style="max-height: 560px; overflow-y: auto">
        <div v-for="(i) in 100">{{ i }}</div>
      </div>


      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>

      <!--      模拟抽屉-->
      <div class="drawer-box" :class="drawerVisible?'show':''">
        <el-button
            class="show-btn"
            :icon="drawerVisible ? 'el-icon-arrow-right': 'el-icon-arrow-left'"
            type="info"
            circle
            size="mini"
            @click.stop="showDrawer">
        </el-button>

        <h1 class="drawer-title">
          <el-button type="text" icon="el-icon-right" @click.stop="showDrawer">收起</el-button>
          <span>规则内容填写说明</span>
        </h1>

        <div class="drawer-content">
          <h3 class="drawer-content-title" style="margin-bottom: 10px">规则内容示例:</h3>
          <el-input
              style="margin-bottom: 15px"
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              resize="none"
              readonly
              v-model="drawerTextarea">
          </el-input>
          <h3 class="drawer-content-title">sid前五位查询:</h3>
          <h4 class="drawer-content-stitle">规则内容中的sid前五位需与码表中的编码保持一致，后9位可自定义填写</h4>
          <div class="rule-types">
            <ul style="margin-right: 20px">
              <li class="rule-title">规则大类</li>
              <li :class="index===drawerMainClassActive ?'active':''" v-for="(item,index) in mainClassList" :key="index" @click.stop="drawerMainClassClick(index, item.classNo)">
                {{ item.className }}
              </li>
            </ul>
            <ul v-if="drawerSubClassList.length">
              <li class="rule-title">规则小类</li>
              <li v-for="(item,index) in drawerSubClassList" :key="index">
                {{ item.className }}
              </li>
            </ul>
            <ul  v-if="drawerSubClassList.length">
              <li class="rule-title">编码</li>
              <li v-for="(item,index) in drawerSubClassList" :key="index">
                {{drawerMainClassNo}}{{ item.classNo }}
              </li>
            </ul>
          </div>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      mainClassList: [
        {
          "id": 187,
          "className": "恶意程序",
          "classNo": "20",
          "parentNo": "-1",
          "creatTime": "2022-05-10 16:01:50",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 200,
          "className": "系统攻击",
          "classNo": "21",
          "parentNo": "-1",
          "creatTime": "2022-05-10 16:28:23",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 206,
          "className": "Web攻击",
          "classNo": "22",
          "parentNo": "-1",
          "creatTime": "2022-05-10 16:29:58",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 240,
          "className": "网络探测",
          "classNo": "23",
          "parentNo": "-1",
          "creatTime": "2022-05-10 16:36:01",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 245,
          "className": "可疑行为",
          "classNo": "24",
          "parentNo": "-1",
          "creatTime": "2022-05-10 16:37:04",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 257,
          "className": "高级威胁",
          "classNo": "25",
          "parentNo": "-1",
          "creatTime": "2022-05-10 16:39:07",
          "updateTime": "2023-12-08 10:17:28",
          "submitter": "packeteye",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        }
      ],

      drawerVisible: false,
      drawerTextarea: 'alert tcp any any -> any any (msg:"规则名称"; flow:to_server,established; content:"|00 00 00 00 00 00 00 00 00 00 00 00 00|"; offset:0; depth:13; threshold: type both, track by_src, count 10, seconds 60; sid:20101924010101; rev:1;)',
      drawerMainClassActive: -1,
      drawerMainClassNo: '',
      drawerSubClassList: [],
    };
  },
  methods: {
    showDrawer() {
      this.drawerVisible = !this.drawerVisible;
    },
    drawerMainClassClick(index, classNo) {
      if (index === this.drawerMainClassActive) {
        return false;
      }
      this.drawerSubClassList = [
        {
          "id": 188,
          "className": "僵尸程序",
          "classNo": "101",
          "parentNo": "20",
          "creatTime": "2022-05-10 16:02:04",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 189,
          "className": "远控木马",
          "classNo": "102",
          "parentNo": "20",
          "creatTime": "2022-05-10 16:02:04",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 190,
          "className": "网银木马",
          "classNo": "103",
          "parentNo": "20",
          "creatTime": "2022-05-10 16:02:04",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 191,
          "className": "窃密木马",
          "classNo": "104",
          "parentNo": "20",
          "creatTime": "2022-05-10 16:02:04",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 192,
          "className": "勒索软件",
          "classNo": "105",
          "parentNo": "20",
          "creatTime": "2022-05-10 16:02:04",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 193,
          "className": "网络蠕虫",
          "classNo": "106",
          "parentNo": "20",
          "creatTime": "2022-05-10 16:02:04",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 194,
          "className": "后门程序",
          "classNo": "107",
          "parentNo": "20",
          "creatTime": "2022-05-10 16:02:04",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 195,
          "className": "流氓软件",
          "classNo": "108",
          "parentNo": "20",
          "creatTime": "2022-05-10 16:02:04",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 196,
          "className": "黑市工具",
          "classNo": "109",
          "parentNo": "20",
          "creatTime": "2022-05-10 16:02:04",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 197,
          "className": "挖矿程序",
          "classNo": "110",
          "parentNo": "20",
          "creatTime": "2022-05-10 16:02:04",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 198,
          "className": "下载者",
          "classNo": "111",
          "parentNo": "20",
          "creatTime": "2022-05-10 16:02:04",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        },
        {
          "id": 199,
          "className": "其他恶意软件",
          "classNo": "112",
          "parentNo": "20",
          "creatTime": "2022-05-10 16:02:04",
          "updateTime": "2023-04-20 10:37:41",
          "submitter": "config",
          "children": null,
          "isActive": 1,
          "ruleType": 1
        }
      ];
      this.drawerMainClassActive = index;
      this.drawerMainClassNo = classNo;
    }
  }
};
</script>

<style>
.el-dialog {
  overflow: hidden;
}

.drawer-box {
  position: absolute;
  top: 54px;
  right: -485px;
  width: 500px;
  height: 620px;
  background: #fff;
  box-shadow: -1px 2px 12px #333333;
  transition: all 0.3s ease;
  border-radius: 4px 0 0 4px;
  box-sizing: border-box;
}
.drawer-box.show {
  right: 0;
}

.drawer-title {
  position: relative;
  font-size: 18px;
  margin: 0;
  text-align: center;
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  color: #000;
  border-bottom: 1px solid #eee9e9;
}
.drawer-title .el-button--text {
  position: absolute;
  left: 0;
  top: 9px;
  font-weight: bold;
  font-size: 14px;
}


.drawer-content {
  height: 500px;
  width: 500px;
  max-height: 500px;
  overflow-y: auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.drawer-content-title {
  font-size: 15px;
  font-weight: bold;
  color: #409EFF;
  margin: 10px 0 0 0;
}
.drawer-content-stitle {
  font-size: 12px;
  font-weight: bold;
  color: #a19d9d;
  margin: 5px 0 20px 0;
}
.rule-types {
  font-size: 14px;
  display: flex;
}
.rule-types li {
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  border: 1px solid #ccc;
  border-bottom: none;
  width: 140px;
  text-align: center;
}
.rule-types li:first-of-type {
  background: #F7FCFF;
}
.rule-types li:last-of-type {
  border: 1px solid #ccc;
}
.rule-types .active {
  background: #409EFF;
  color: #fff;
}

.show-btn {
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
}
</style>